<template>
  <div class="comment-body">
    <div class="title">
      <div class="title-tag"></div>
      <div class="title-text">热门评论</div>
    </div>
    <van-divider content-position="left"></van-divider>
    <div class="none" v-if="total === 0">没有评论，抢沙发</div>
    <div v-else>
      <div v-for="item in comments" :key="item.id">
        <van-skeleton :row="3" :loading="loading">
          <div class="comment">
            <div class="avatar">
              <img :src="item.photo" />
            </div>
            <div class="comment-body">
              <div class="comment-body-title">
                <span>{{ item.username }}</span
                ><span class="comment-time">{{ item.created }}</span>
              </div>
              <div class="comment-content">{{ item.content }}</div>
            </div>
          </div>
        </van-skeleton>
        <van-divider content-position="left"></van-divider>
      </div>
      <van-button
        style="margin-top: 7px !important"
        plain
        hairline
        type="primary"
        size="large"
        @click="loadMore"
        :loading="loadMoreLoading"
        >加载更多</van-button
      >
    </div>
    <van-divider content-position="left"></van-divider>
  </div>

  <div class="comment-add">
    <van-field v-model="content" center clearable placeholder="评论">
      <template #button>
        <van-button size="small" @click="addComment" type="primary"
          >发 送</van-button
        >
      </template>
    </van-field>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, watch, onMounted, ref } from "vue";
import { NewsService } from "@/api/news";
import { UserService } from "@/api/user";
import { Notify, Toast } from "vant";
export default {
  name: "CommonComment",
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props: any) {
    let data = reactive({
      comments: [],
      total: 0,
      page: 1,
      loadMoreLoading: false,
      content: "",
      userinfo: { code: 112, message: "您还未登录，请先登陆后在进行评论" },
    });
    const loading = ref(true);

    onMounted(() => {
      loading.value = false;
    });

    const list = () => {
      data.loadMoreLoading = true;
      NewsService.commentList({ page: data.page, id: props.id }).then((res) => {
        console.log(res.data.data);

        if (res.data.code === 0) {
          data.total = res.data.data.total;
          // @ts-ignore
          data.comments = [...data.comments, ...res.data.data.comments];
        } else {
          Notify({ type: "danger", message: res.data.message });
        }
        data.loadMoreLoading = false;
      });
    };

    const loadMore = () => {
      if (data.total <= data.comments.length) {
        Toast("已全部加载");
        return;
      }
      data.page += 1;
    };
    list();
    const addComment = () => {
      if (data.content === "") {
        Notify({ type: "danger", message: "请输入评论" });
        return;
      }
      data.loadMoreLoading = true;
      UserService.userinfo().then((res) => {
        if (res.data.code === 112) {
          Notify({ type: "danger", message: data.userinfo.message });
        } else {
          NewsService.comment({ id: props.id, comment: data.content }).then(
            (res) => {
              if (res.data.code === 0) {
                Toast("评论成功");
                data.content = "";
                data.total += 1;
                // @ts-ignore
                data.comments.push(res.data.data);
              }
            }
          );
        }
        data.loadMoreLoading = false;
      });
    };
    watch(
      () => data.page,
      (newValue, oldVlaue) => {
        list();
      }
    );
    return {
      ...toRefs(data),
      loadMore,
      loading,
      addComment,
    };
  },
};
</script>

<style lang="less">
.comment-body {
  margin-bottom: 50px;
}
.comment {
  display: flex;
  justify-content: space-between;
  .comment-body {
    width: 90%;
    padding: 0 15px;
  }
  .comment-body-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    margin-top: 10px;
  }
  .avatar {
    width: 45px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(216, 219, 221);
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .comment-time {
    color: rgb(164, 166, 167);
    font-size: 14px;
    line-height: 20.8px;
  }
  .comment-content {
    letter-spacing: 1pt;
    font-size: 15px;
  }
}
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin-top: 20px;
  display: flex;

  .title-tag {
    width: 20px;
    height: 20px;
    background-color: rgb(76, 126, 255);
  }
  .title-text {
    margin-left: 10px;
    font-weight: bold;
    font-size: 20px;
  }
}
.none {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: rgb(164, 166, 167);
}

.comment-add {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  .van-button--small {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    margin-right: 12px;
  }
}
</style>